<template>
  <div class="order flex flex-column">
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="order-list flex-1">
      <div class="order-item flex" v-for="order in order_list" :key="order.id">
        <div class="order-main flex-1">
          <div class="order-content flex flex-content-between">
            <div>订单号:{{ order.orderId }}</div>
            <van-tag
              type="primary"
              v-if="['CONFIRM', 'INIT', 'PROCESS'].indexOf(order.orderStatus) > -1"
              plain
              round
              >进行中</van-tag
            >
            <van-tag type="success" v-if="order.orderStatus === 'SUCCESS'" plain round
              >{{success_dict[order.failMessage]||'成功'}}</van-tag
            >
            <van-tag  type="danger" v-if="order.orderStatus === 'FAIL'" plain round>{{fail_dict[order.failMessage]||'失败'}}</van-tag>
          </div>
          <!-- <div class="order-content flex flex-content-between">
            <div>抖音<van-divider vertical />14789945242</div>
          </div> -->
          <!-- <div class="order-sub-content">抖音：14789945242{{ item }}</div> -->
          <div class="order-bottom flex flex-content-between">
            <div class="time">
              {{ order.platformName }}<van-divider vertical />{{ order.phone
              }}<van-divider vertical />{{ order.ctime }}
            </div>
            <!-- <div
              type="primary"
              v-if="['CONFIRM', 'INIT', 'PROCESS'].indexOf(order.orderStatus) > -1"
              class="more flex flex-center"
            >
              +{{ order.amount }}积分
            </div> -->
            <div
              type="success"
              v-if="order.orderStatus === 'SUCCESS'"
              class="more flex flex-center"
            >
              +{{ order.amount }}积分
            </div>
            <!-- <div type="danger" v-if="order.orderStatus === 'FAIL'" class="more flex flex-center">
              +{{ order.amount }}积分
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { inject, ref } from 'vue'
const $ajax: any = inject('$ajax')
const $api: any = inject('$api')
const currentInstance: any = getCurrentInstance()
let order_list: any = ref([])
let fail_dict: any = ref({
"TimeOut Closed":"取号超时",
"Upload TimeOut":"上传超时",
"Old Code":"老号",
"Error Cod":"错误短信码",
"Fail":"失败"
})
let success_dict: any = ref({
"Auto Settle":"自动结算"
})
async function get_order_list() {
  const data = await $ajax({
    api: $api.order_list
  })
  order_list.value = data.data.orderlist
}
get_order_list()
//返回
const onClickLeft = () => {
  history.back()
}
</script>
<style lang="less" scoped>
.order {
  height: 100%;
  font-size: 0.16rem;
  .order-list {
    overflow: auto;
    .order-item {
      height: 0.64rem;
      background: #fff;
      padding: 0.06rem;
      margin-top: 0;
      &:not(last-child) {
        border-bottom: 1px solid #e2eeff;
      }
      // &:last-child{
      //   border-bottom: 0
      // }
      .order-icon {
        width: 0.45rem;
        font-size: 0.18rem;
        color: #628cff;
        img {
          width: 100%;
        }
      }
      .order-main {
        padding: 0 0.12rem;
        .order-content {
          font-size: 0.14rem;
          :deep(.van-tag) {
            font-size: 0.12rem;
            border: 0;
            border-radius: 0.06rem;
            padding: 0 0.06rem;
            line-height: 0.12rem;
          }
        }
        .order-bottom {
          margin-top: 0.06rem;
          .time {
            color: #bfbfbf;
            font-size: 0.13rem;
            :deep(i) {
              margin-right: 0.03rem;
            }
            :deep(.van-divider--vertical) {
              margin: 0 0.04rem;
              border-color: #bfbfbf;
            }
          }
          .more {
            // width: 0.78rem;
            // height: 0.26rem;
            flex-shrink: 0;
            border-radius: 0.34rem;
            // background: linear-gradient(99deg, #f1f4ff 1.64%, #e1e7fe 27%, #d5ebff 98.52%);
            color: #4e7dff;
            font-family: 'PingFang SC';
            font-size: 0.12rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            &[type='primary'] {
              color: #1989fa;
            }
            &[type='success'] {
              color: #07c160;
            }
            &[type='danger'] {
              color: #ee0a24;
            }
          }
        }
      }
    }
  }
}
</style>
